<template>
  <div ref="wrapper">
    <home-header></home-header>
    <home-swiper :SwiperList="SwiperList"></home-swiper>
    <home-icon :IconList="IconList"></home-icon>
    <home-tuijian :tuijian="tuijian"></home-tuijian>
    <home-week :week="weekList"></home-week>
  </div>
</template>
<script>
import HomeHeader from "./components/header";
import HomeSwiper from "./components/Swiper";
import HomeIcon from "./components/icon";
import HomeTuijian from "./components/tuijian";
import HomeWeek from "./components/week";
import axios from "axios";
import { mapMutations, mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      SwiperList: [],
      IconList: [],
      tuijian: [],
      weekList: [],
      lastcity: "",
    };
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomeTuijian,
    HomeWeek,
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    getHomeInfo() {
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    },

    getHomeInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.SwiperList = data.SwiperList;
        this.IconList = data.IconList;
        this.tuijian = data.tuijian;
        this.weekList = data.weekList;
      }
    },
  },
  mounted() {
    this.lastcity = this.city;
    this.getHomeInfo();
  },
  activated() {
    if (this.lastcity !== this.city) {
      this.lastcity = this.city;
      this.getHomeInfo();
    }
    console.log("1234");
  },
};
</script>

<style>
.home {
  font-size: 50px;
}
</style>
